

<script setup lang="ts">
// 组件引用
// import GithubCorner from '@/components/GithubCorner/index.vue';
import { ref, reactive, toRefs, onMounted } from 'vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { getCasualOrderIndex } from '@/api/order/index';
// import BarChart from './components/Chart/BarChart.vue';
// import PieChart from './components/Chart/PieChart.vue';
// import RadarChart from './components/Chart/RadarChart.vue';
//
// import Project from './components/Project/index.vue';
// import Team from './components/Team/index.vue';
const state = reactive({
  res: {
    topInvite: [],
    topSingles: [],
    engineerNumber: '',
    ptNumber: '',

  },

});
const { res } = toRefs(state);
const typeRadio = ref("全部")
onMounted(() => {
  getOrderIndex("");
});
function typeChange(value:any) {
  console.log("value", value);
  
  let type = ""
  if(value === "本周") {
    type= "thisWeek"
  }
  if(value === "上周") {
    type= "lastWeek"
  }
  if(value === "本月") {
    type= "month"
  }
  if(value === "上月") {
    type= "lastMonth"
  }
  getOrderIndex(value);
}

function getOrderIndex(type:string) {
  getCasualOrderIndex({ type: type }).then((res: any) => {
    console.log(res);
    state.res = res.data;
  });
}
</script>

<template>
  <div>
    <div class="dashboard-container">
      <!-- 数据 -->
      <el-row :gutter="40" class="card-panel__col">
        <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
          <div class="card-panel">
            <div class="xiaotitle">用户注册数量</div>
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="uv" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-num">{{ res.engineerNumber }}</div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
          <div class="card-panel">
            <div class="xiaotitle">平台发布订单数</div>
            <div class="card-panel-icon-wrapper icon-message">
              <svg-icon icon-class="message" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-num">{{ res.ptNumber }}</div>
            </div>
          </div>
        </el-col>

        <!-- <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">

          <div class="card-panel">
            <div class="xiaotitle">
              进行中订单数量
            </div>
            <div class="card-panel-icon-wrapper icon-money">
              <svg-icon icon-class="money" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">收入金额</div>
              <div class="card-panel-num">1000</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
          <div class="card-panel">
            <div class="xiaotitle">
            </div>
            <div class="card-panel-icon-wrapper icon-shopping">
              <svg-icon icon-class="shopping" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">订单数</div>
              <div class="card-panel-num">1000</div>
            </div>
          </div>
        </el-col> -->
      </el-row>

      <!-- 项目 + 团队成员介绍 -->
      <el-row :gutter="40">
        <!-- 项目介绍 -->
        <el-col :md="12" :lg="12" class="card-panel__col">
          <!--        <Project />-->
        </el-col>

        <!-- 团队介绍 -->
        <el-col :md="12" :lg="12" class="card-panel__col">
          <!--        <Team />-->
        </el-col>
      </el-row>

      <!-- Echarts 图表 -->
      <el-row :gutter="40" style="margin-top: 20px">
        <el-col :sm="24" :lg="8" class="card-panel__col">
          <!--        <BarChart-->
          <!--          id="barChart"-->
          <!--          height="400px"-->
          <!--          width="100%"-->
          <!--          class="chart-container"-->
          <!--        />-->
        </el-col>

        <el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
          <!--        <PieChart-->
          <!--          id="pieChart"-->
          <!--          height="400px"-->
          <!--          width="100%"-->
          <!--          class="chart-container"-->
          <!--        />-->
        </el-col>

        <el-col :xs="24" :sm="12" :lg="8" class="card-panel__col">
          <!--        <RadarChart-->
          <!--          id="radarChart"-->
          <!--          height="400px"-->
          <!--          width="100%"-->
          <!--          class="chart-container"-->
          <!--        />-->
        </el-col>
      </el-row>
    </div>
    <div>
      <div class="shouyeTableHeader">
        <p>灵活用工精英榜</p>
        <el-radio-group v-model="typeRadio" size="large" @change="typeChange">
          <el-radio-button label="全部" value="" />
          <el-radio-button label="本周" value="thisWeek" />
          <el-radio-button label="上周" value="lastWeek" />
          <el-radio-button label="本月" value="month" />
          <el-radio-button label="上月" value="lastMonth" />
        </el-radio-group>
      </div>

      <div class="shouyeTable">
        <div>
          <div class="tableTitle">抢单榜</div>
          <el-table :data="res.topSingles" border style="width: 100%">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="engineer_realname" label="名称" />
            <el-table-column prop="money" label="服务费用" />
            <!-- <el-table-column prop="address" label="Address" /> -->
          </el-table>
        </div>
        <div>
          <div class="tableTitle">邀请榜</div>
          <el-table :data="res.topInvite" border style="width: 100%">
            <el-table-column prop="engineer_realname" label="名称" />
            <el-table-column prop="money" label="服务费用" />
            <!-- <el-table-column prop="address" label="Address" /> -->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.shouyeTable {
  display: flex;
  & > div {
    margin: 10px;
    padding: 10px;
    flex: 1;
    & .tableTitle {
      color: #36a3f7;
      font-weight: 500;
      margin: 10px 0 20px 0;
    }
  }
}
.shouyeTableHeader {
  padding: 20px 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: #36a3f7;
}
.dashboard-container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
    z-index: 99;
  }

  .box-center {
    margin: 0 auto;
    display: table;
  }

  .user-profile {
    .box-center {
      padding-top: 10px;
    }

    .user-role {
      padding-top: 10px;
      font-weight: 400;
      font-size: 14px;
    }

    .box-social {
      padding-top: 30px;

      .el-table {
        border-top: 1px solid #dfe6ec;
      }
    }

    .user-follow {
      padding-top: 20px;
    }
  }

  .card-panel__col {
    margin-bottom: 12px;
  }

  .card-panel {
    height: 125px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    .xiaotitle {
      padding: 10px 20px 0 0;
      font-size: 20px;
      font-weight: 600;
      height: 36px;
      text-align: right;
    }
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-user {
        background: #e77541;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;

      .svg-icon {
        width: 4em !important;
        height: 4em !important;
      }
    }

    .icon-message {
      color: #36a3f7;
      .svg-icon {
        width: 4em !important;
        height: 4em !important;
      }
    }

    .icon-money {
      color: #f4516c;

      .svg-icon {
        width: 4em !important;
        height: 4em !important;
      }
    }

    .icon-shopping {
      color: #34bfa3;

      .svg-icon {
        width: 4em !important;
        height: 4em !important;
      }
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 0 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 42px 20px 0 20px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
        text-align: right;
      }
    }
  }

  .chart-container {
    background: #ffffff;
  }
}
</style>
